import React ,{ useEffect, useState }from 'react'
import moment from 'moment';
import type { ColumnsType } from 'antd/es/table';
import { Button } from 'antd';
import SearchForm from '@/components/SearchForm';
import CustomTable from '@/components/Table';
import { taskStatusEnum } from './enum';
import { getTaskCenterList } from '@/service/personal/taskCenter';
import { getPublicDownloadUrl } from '@/service/personal';


const formItemLayout = {
  labelCol: { flex: '80px' },
  wrapperCol: { flex: '1' },
};

export default function TaskCenter () {

  const formItems: any[] = [
    {
      type: 'group',
      key: 'group1',
      groupItems: [
        {
          type: 'input',
          label: '任务ID',
          name: 'taskId',
          key: 'taskId',
        },
        {
          type: 'select',
          label: '任务类型',
          name: 'taskType',
          key: 'taskType',
          items: [
            {
              value: '采购计划申请',
              text: '采购计划申请',
            },
            {
              value: '付款申请',
              text: '付款申请',
            },
            {
              value: '车辆指标',
              text: '车辆指标',
            },
            {
              value: '保险列表',
              text: '保险列表',
            },
            {
              value: '处置列表',
              text: '处置列表',
            },
          ],
        },
        {
          type: 'select',
          label: '任务状态',
          name: 'taskStatus',
          key: 'taskStatus',
          title: 'text',
          items: Object.keys(taskStatusEnum).map((item:string)=>(
            {
              value:item,
              text:taskStatusEnum[item]
            }
          ))
        }
      ],
    },
    {
      type: 'group',
      key: 'group2',
      groupItems: [
        {
          type: 'input',
          label: '任务提交人',
          name: 'username',
          key: 'username',
        },
        {
          type: 'input',
          label: '提交人手机号',
          name: 'phone',
          key: 'phone',
        },
        {
          type: 'dateRange',
          label: '创建时间',
          name: 'date',
          key: 'date'
        }
      ]
    }
  ];

  const columns: ColumnsType<InitiationAPI.InitiationColumns> = [
    {
      title: '任务ID',
      dataIndex: 'taskId',
      align: 'center',
    },
    {
      title: '任务类型',
      dataIndex: 'taskType',
      align: 'center',
      render: (text : any) => <span>{text || '--'}</span>,
    },
    {
      title: '任务名称',
      dataIndex: 'taskName',
      align: 'center',
    },
    {
      title: '查询条件',
      dataIndex: 'queryCondition',
      align: 'center',
    },
    {
      title: '提交人',
      dataIndex: 'username',
      align: 'center',
    },
    {
      title: '提交人手机号',
      dataIndex: 'phone',
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'creatDate',
      align: 'center',
    },
    {
      title: '完成时间',
      dataIndex: 'finishTime',
      align: 'center',
    },
    {
      title: '任务状态',
      dataIndex: 'taskStatus',
      align: 'center',
      render: (text:string) => taskStatusEnum[text]
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      fixed: 'right',
      width: 100,
      render: (text, record:any) => (
        <div>
          <Button type='link' onClick={async()=>{
              const url =  await getPublicDownloadUrl({ id:[record?.giftKey] })
          }}>
              数据下载
          </Button>
        </div>
      )
    }
  ]

  const [formData,setFormData]=useState({});
  const [total, setTotal] = useState();
  const [params, setParams] = useState({
    current: 1,
    pageSize: 10,
  });
  const [tableList, setTableList] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  const getTabelValue = async(value:any,pagination?:any) => {
    setLoading(true)
    let values = value
    if(values?.date){
      values.createTime	= moment(values.date[0]).format('YYYY-MM-DD')
      values.endTime	= moment(values.date[1]).format('YYYY-MM-DD')
      delete values.date
    }
    setFormData(values)
    const newPagination = pagination? {
      ...pagination,
      size: pagination.pageSize
    } : {
      current: 1,
      size: params.pageSize
    }
    setParams(newPagination)
    values = {
      ...values,
      ...newPagination
    }
    const  res =  await getTaskCenterList(values)
    if(res?.data){
      setTotal(res.data?.total || 0)
      if(res.data?.records){
        setTableList(res.data?.records || [])
      }
    }
    setLoading(false)
  }

  useEffect(()=>{
    getTabelValue(formData)
  },[])


  const onFinish = (values: any) => {
    getTabelValue(values);
    // eslint-disable-next-line no-param-reassign
  };

  // 搜索重置
  const onReset = () => {
    getTabelValue({});
  };

  return (
      <div>
          <SearchForm
            onFinish={onFinish}
            onReset={onReset}
            formItems={formItems}
            formLayout={formItemLayout}
          />
          <CustomTable
            params={params}
            columns={columns}
            total={total}
            scroll={{y: 480}}
            pagination
            callback={(pagination: any) => {
              getTabelValue(formData,pagination);
            }}
            loading={loading}
            dataSource={tableList}
          />
      </div>
  )
}
